<template>
	<transition name="slide">
		<music-list :title="title" :bgImage="bgImage" :songs="albums"></music-list>
	</transition>
</template>

<script>
	import MusicList from '@/components/music-list/music-list';
	import { getAlbum } from '@/service/recommend';
	import { processSongs } from '@/service/song';
	import { mapGetters } from 'vuex';

	export default {
		name: 'Disc',
		data() {
			return {
				albums: []
			}
		},
		computed: {
			title() {
				return this.disc.title;
			},
			bgImage() {
				return this.disc.pic;
			},
			...mapGetters(['disc'])
		},
		async activated() {
			if (!this.disc.id) {
				this.$router.push('/recommend');
				return;
			}
			const data = await getAlbum(this.disc);
			const albums = await processSongs(data.songs);
			this.albums = albums;
		},
		deactivated() {
			setTimeout(() => {
				this.albums = [];
			}, 500);
		},
		components: {
			MusicList
		}
	}
</script>

<style lang="stylus" scoped>
	.slide-enter-active, .slide-leave-active
		transition: all 0.3s
	.slide-enter, .slide-leave-to
		transform: translate3d(100%, 0, 0)
</style>